<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Iscore - partition</title>
    	<link rel="stylesheet" href="style/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="style/partition.css">
		<link rel="stylesheet" type="text/css" href="style/scoreCalque.css">
		<script src="js/lib/jquery-1.9.1.min.js"></script>
		<script src="js/Connection.js"></script>
		<script src="js/NoteCalque.js"></script>
		<script src="js/lib/jquery-ui.min.js"></script>
		<script src="./js/instrument.js"></script>
		<script src="./js/parametre.js"></script>
    </head>
    <body>
		<?php
		require_once("./class/Include.php");
		require_once("sessionManager.php");
		$partition = Partition::get($_GET['partId']);
		$concert = $partition->getConcert();
		if(isset($_GET["user"])){
			$user = User::get($_GET["user"]);
		}
		else{
			$user = User::get($_SESSION['userId']);
		}
		$user_name = $user->getNom();
		$usrs = UserInstrumentConcert::getAll(array(
			array('field'=>'user','operator'=>'=','value'=>$user ->getId()),
			array('field'=>'concert_id','operator'=>'=','value'=>$concert->getId())
		));
		$role = $usrs[0]->getRole();
		$nom_role = $usrs[0]->getNom();
		$instrument = $usrs[0]->getInstrument();
		$nom_instrument = "";
		if(!is_null($instrument)){
			$nom_instrument = $instrument->getNom();
		}
		if(!is_null($nom_role)){
			$nom_instrument = $nom_role;
		}
		$lignes = $partition->getListLigne(array(),array('order by' =>array("ordre")));
		$nb_lignes_par_page = 5;
		$num_page=1;
		if(isset($_GET["numPage"])){
			$num_page= $_GET["numPage"];
		}
		if($num_page == null || $num_page == 0 ){
			$num_page = 1;
		}
		$fin = $nb_lignes_par_page*$num_page;
		$debut = $fin - $nb_lignes_par_page;
		?>
        <div id="menu">
            <div id="btnParametre">
                <div class="bouton" id="btnAccueil">
                   <img id="imgAccueil" src="./style/logo/accueil.svg" alt="Retour à l'accueil"/>
                </div>
                <div class="menuTexte">
                	<p id="txtAccueil">Accueil</p>
                </div>
                <div class="bouton" id="btnMasquer">
                 	<img id="imgMasquer" src="./style/logo/masquer.svg" alt="Masquer le menu"/>
                </div>
				<div class="menuTexte">
                   <p id="txtMasquer">Masquer</p>
                </div>
                <div class="bouton" id="btnInstrument">
                 	<img id="imgInstrument" src="./style/logo/instrument.svg" alt="Changer instrument"/>	
                </div>
				<div class="menuTexte">
                    <p id="txtInstrument"><?php echo $nom_instrument;?></p>
                </div>
            </div>
            <div id="separation"></div>
            <div id="btnDessin">
            	            	
                <div class="bouton" id="btnCrayon" >
                	<img id="imgCrayon" src="./style/logo/crayon.svg" alt="Crayon"/>
                </div>
                <div class="menuTexte">
                   <p id="txtAnnoter">Annotation</p>
                </div>
                <div class="bouton" id="btnGomme">
                	<img id="imgGomme" src="./style/logo/gomme.svg" alt="Gomme"/>
                </div>
                <div class="menuTexte">
                   <p id="txtGomme">Gomme</p>
                </div>
                <div class="bouton" id="btnPartage" >
                	<img id="imgPartage" src="./style/logo/personnel.svg" alt="Mode de partage">
                </div>
                <div class="menuTexte">
                   <p id="txtPartage">Personnel</p>
                </div>
                <div class="bouton" id="btnParam" >
                	<img id="imgParametre" src="./style/logo/parametres.svg" alt="Parametres">
                </div>
                <div class="menuTexte">
                   <p id="txtParametres">Paramètres</p>
                </div>      
            </div>
        </div>
        <div id="contenu_canvas">
                <div  id="btnGauche">
                 	<img id="imgPrecedent" src="./style/logo/left.svg" alt="Page précedente"/>
                </div>
                <div id="partitions">
				<?php
				echo "<h1 id=\"title\">".$partition->getNom()."</h1>";
				$i = 1;
				foreach($lignes as $ind=> $ligne){
					if($i <= $fin && $i >= $debut){
						if(is_null($instrument)){
							echo '<div id="score_'.$ligne->getId().'" class="SCORE"></div>';
							$i++;
						}
						else{
							if($ligne->getInstrument() == $instrument){
								echo '<div id="score_'.$ligne->getId().'" class="SCORE"></div>';
								$i++;
							}
						}
					}
					else{
						$i++;
					}
				}
				$user_calques = $user->getListUserCalqueWhereUser();
				$calques = array();
				foreach($user_calques as $ind=>$user_calque){
					$calques[] = $user_calque->getCalque();
				}
				$has_next_page = 0;
				$has_prev_page = 0;
				if($i > $fin){
					$has_next_page= 1;
				}
				if($debut > 1){
					$has_prev_page= 1;
				}
				
			?>
			<input type="hidden" id="ip_serveur" value="<?php echo IP_SERVEUR; ?>"/>
			<input type="hidden" id="port_serveur" value="<?php echo PORT_SERVEUR; ?>"/>
			<script>
			    niveau = <?php echo $role; ?>;
				$(document).ready(function (){
					var ratio = 0.80 * document.body.clientWidth / 1600;
					window.partition = new Partition();
					window.partition = partition;
					partition.initialize({user: "<?php echo $user_name; ?>",niveau: <?php echo $role; ?>});
					<?php
					$i=1;
					foreach($lignes as $ind=> $ligne){
						if($i <= $fin && $i >= $debut){
							if(is_null($instrument)){
								$i++;
								?>
								partition.ajouterScore({
									tailleCrayon : 2,
									tailleGomme : 8,
									coefficient : ratio,
									couleur : "#00349a",
									idScore: "<?php echo $ligne->getId(); ?>",
									<?php
										$calques_temp = $ligne->getListCalque();
										foreach($calques_temp as $ind2=> $calque){
											if(in_array($calque,$calques)){
												if($calque->getNiveau() == 2 && $role < 3){
													echo 'idCalque2: "'.$calque->getId().'",';
												}
												if($calque->getNiveau() == 3){
													echo 'idCalque3: "'.$calque->getId().'"';
												}
												if($calque->getNiveau() == 1 ){
													echo 'idCalque1: "'.$calque->getId().'",';
												}
											}
										}
									?>
								});
								<?php
							}
							else{
								if($ligne->getInstrument() == $instrument){
									$i++;
									?>
									partition.ajouterScore({
										tailleCrayon : 2,
										tailleGomme : 8,
										coefficient : ratio,
										couleur : "#00349a",
										idScore: "<?php echo $ligne->getId(); ?>",
										<?php
											$calques_temp = $ligne->getListCalque();
											foreach($calques_temp as $ind2=> $calque){
												if(in_array($calque,$calques)){
													if($calque->getNiveau() == 2 && $role < 3){
													echo 'idCalque2: "'.$calque->getId().'",';
													}
													if($calque->getNiveau() == 3){
														echo 'idCalque3: "'.$calque->getId().'"';
													}
													if($calque->getNiveau() == 1 ){
														echo 'idCalque1: "'.$calque->getId().'",';
													}
												}
											}
										?>
									});
									<?php
								}
							}
						}
						else{
							$i++;
						}
					}
					?>					
					partition.run();
					
				});
				
			</script>
</div>	
                <div  id="btnDroite">
                 	<img id="imgSuivante" src="./style/logo/right.svg" alt="Page suivante"/>
                </div>
  
                   <p id="page"><?php echo $num_page; ?></p>
				   <input id="has_next_page" value="<?php echo $has_next_page;?>" type="hidden"/>
				   <input id="has_prev_page" value="<?php echo $has_prev_page;?>" type="hidden"/>
				   <input id="num_page" value="<?php echo $num_page;?>" type="hidden"/>
				   <input id="part_id" value="<?php echo $partition->getId();?>" type="hidden"/>
				   <input id="id_user" value="<?php echo $user->getId();?>" type="hidden"/>

		</div>
		<div class="message_info" id="aide_info">
			<p>Pour afficher le menu, un double clic suffit!</p>
		</div>
		<div class="message_info" id="erreurServeur">
			<p>Erreur : verifier votre connection au serveur</p>
		</div>
	    <div id="dialogInstrument" title="Partitions des autres instruments" >
			<div id="listeInstrument">
				<!--
		        <div id="Instrument1" class="instrument" onclick='SelectInstrument(Instrument1)'>
		        	<p>Guitare</p>
		        </div>
		        <div id="Instrument2" class="instrument" onclick='SelectInstrument(Instrument2)'>
		        	<p>Violon</p>
		        </div>
		        <div id="Instrument3" class="instrument" onclick='SelectInstrument(Instrument3)'>
		        	<p>Triangle</p>
		        </div>
		        <div id="Instrument4" class="instrument" onclick='SelectInstrument(Instrument4)'>
		        	<p>Batterie</p>
		        </div>
		        <div id="Instrument5" class="instrument" onclick='SelectInstrument(Instrument5)'>
		        	<p>Basse</p>
		        </div>
		       -->
	    	</div>
		</div>
		<div id="dialogParametre" title="Paramètres" >		
			<div id="ChoixParametre">
				<div id="Gomme">
					<h1>Type de la gomme</h1>
			        <div id="gomme1" class="gomme" onclick='SelectGomme(gomme1,8)'>
			        	<p>Gomme</p>
			        </div>
			        <div id="gomme2" class="gomme" onclick='SelectGomme(gomme2,20)'>
			        	<p>Gomme annotation</p>
			        </div>
		        </div>
				<div id="Taille">
					<h1>Taille de la gomme</h1>
			        <div id="taille1" class="taille" onclick='SelectTaille(taille1,4)'>
			        	<div id="T_min"></div>
			        </div>
			        <div id="taille2" class="taille" onclick='SelectTaille(taille2,8)'>
			        	<div id="T_medium"></div>
			        </div>
			        <div id="taille3" class="taille" onclick='SelectTaille(taille3,12)'>
			        	<div id="T_large"></div>
			        </div>
		        </div>
		        <div id="Couleur">
		        	<h1>Couleur du crayon</h1>
			        <div id="couleur1" class="couleur" onclick='SelectCouleur(couleur1,"#00349a")'>
			        </div>
			        <div id="couleur2" class="couleur" onclick='SelectCouleur(couleur2,"#025aa2")'>
			        </div>
			        <div id="couleur3" class="couleur" onclick='SelectCouleur(couleur3,"#669acc")'>
			        </div>
			        <div id="couleur4" class="couleur" onclick='SelectCouleur(couleur4,"#80001b")'>
			        </div>
			        <div id="couleur5" class="couleur" onclick='SelectCouleur(couleur5,"#fdbe01")'>
			        </div>
			        <div id="couleur6" class="couleur" onclick='SelectCouleur(couleur6,"#949494")'>
			        </div>
		        </div>
	    	</div>
		</div>
	  	<script src="./js/partition.js"></script>
    </body>
</html>